<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/indexStyle.css">
    <title>主页</title>

</head>

<body>
    <!-- 导航栏start -->
    <header class="header">
        <div class="container-fluid">
            <div class="header_content">
                <!-- logo图 -->
                <div class="header_logo">
                    <a href="index.html">
                        <img src="images/logo.jpg" alt="LOGO">
                    </a>
                </div>
                <!-- 导航栏搜索 -->
               <form action="#" class="header_search ms-auto">
                    <input type="text" class="form-control" placeholder="搜你想要">
                    <button type="button">
                        <i class="fa fa-search"></i>
                      </button>
                </form>
                <!-- 导航栏中间按钮 -->
                <div class="header_menu">
                    <ul class="header_nav">
                        <li>
                            <a class="header_nav_link" href="index.html" role="button">首页推荐</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="#" role="button" id="digital-area">数码专区</a>
                        </li>
                        <li>
                            <a class="header_nav_link"  role="button" id="my-msg">我的消息</a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏侧边 -->
                <div class="header_action">
                <ul class="header_action_nav">
                    <li>
                        <div class="dropdown">
                            <a class="header_sign dropdown-toggle" id="login_region" href="#" role="button" data-toggle="dropdown" aria-expanded="false">登录/注册</a>
                                <div class="dropdown-menu" aria-labelledby="login">
                                    <a class="dropdown-item" id="dropdown-login-item" href="login.html">登录</a>
                                    <a class="dropdown-item" id="dropdown-exit-item" >退出</a>
                                </div>
                        </div>
                    </li>
                    <li>
                        <a class="header_sign" role="button" id="person_center">个人中心</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航end -->

    
    
      <!-- 分类区域和轮播图 -->
    <div class="page-center">
        <div class="pro-catalog-area">
           <h2>分类</h2>
           <ul class="catalog-bs">
            <li>
              <i class="fa fa-laptop" aria-hidden="true"></i>
              <a>手机</a>
              <span>/</span>
              <a>电脑</a>
            </li>
            <li>
              <i class="fa fa-camera-retro" aria-hidden="true"></i>
              <a>摄像机</a>
              <span>/</span>
              <a>数码配件</a>
            </li>
            <li>
              <i class="fa fa-television" aria-hidden="true"></i>
              <a>电视</a>
              <span>/</span>
              <a>家具</a>
            </li>
            <li>
              <i class="fa fa-bicycle" aria-hidden="true"></i>
              <a>单车</a>
              <span>/</span>
              <a>生活百货</a>
            </li>
            <li>
              <i class="fa fa-book" aria-hidden="true"></i> 
              <a>图书</a>
              <span>/</span>
              <a>玩具乐器</a>
            </li>
            <li>
              <i class="fa fa-dribbble" aria-hidden="true"></i>
              <a>体育用品</a>
              <span>/</span>
              <a>服饰</a>
            </li>
            <li>
              <i class="fa fa-building" aria-hidden="true"></i>
              <a>租房</a>
             
            </li>
           </ul>
        </div>
        <div class="swide">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                  <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="images/1.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="images/2.jpg" class="d-block w-100" alt="...">

                  </div>
                  <div class="carousel-item">
                    <img src="images/3.jpg" class="d-block w-100" alt="...">
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
      </div>

      <div class="index-center-area">
      <div class="recommend-area clearfix">
        <div class="recommend-header">
          <span>猜你喜欢</span>
          <img class="reco-logo" src="images/reco-logo.png" title="猜你喜欢">

        </div>
        <div class="recommend-content-area  clearfix">
            <div class="recommend-content-item" data-id="" style="display: none;">
                <a href="productDetails.html" target="detail-view" class="item-link">
                <div class="img-wrapper">
                    <img  src="images/detailimg.jpg">  
                </div>
                <div class="info-wrapper">
                    <div class="title">Ps 4 游戏机</div>
                </div>
                <div class="price-wrapper">
                    <span class="price-value">
                    <em>¥</em>
                    <span class="price-test">12.8</span>
                    <span>/月</span>
                    </span>
                </div>
                </a>
            </div>
        </div>
      </div>
    </div>
    
    
   

    
    <!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
    <!-- Section: Social media -->
    <section
      class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
    >
      <!-- Left -->
      <div class="me-5 d-none d-lg-block">
        <span>Get connected with us on social networks:</span>
      </div>
      <!-- Left -->
  
      <!-- Right -->
      <div>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-facebook-f"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-google"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-instagram"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-linkedin"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-github"></i>
        </a>
      </div>
      <!-- Right -->
    </section>
    <!-- Section: Social media -->
  
    <!-- Section: Links  -->
    <section class="">
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold mb-4">
              <i class="fas fa-gem me-3"></i>租好玩
            </h6>
            <p>
                投资有风险，购买需谨慎
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              产品
            </h6>
            <p>
              <a href="#!" class="text-reset">数码</a>
            </p>
            <p>
              <a href="#!" class="text-reset">生活</a>
            </p>
            <p>
              <a href="#!" class="text-reset">娱乐</a>
            </p>
            <p>
              <a href="#!" class="text-reset">工作</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              关于我们
            </h6>
            <p>
              <a href="#!" class="text-reset">经营证照</a>
            </p>
            <p>
              <a href="#!" class="text-reset">平台协议</a>
            </p>
            <p>
              <a href="#!" class="text-reset">隐私政策</a>
            </p>
            <p>
              <a href="#!" class="text-reset">免责声明</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              联系我们
            </h6>
            <p><i class="fa fa-home me-3"></i> New York, NY 10012, US</p>
            <p>
              <i class="fa fa-envelope me-3"></i>
              zuhaowan@example.com
            </p>
            <p><i class="fa fa-phone me-3"></i> + 01 234 567 88</p>
            <p><i class="fa fa-print me-3"></i> + 01 234 567 89</p>
          </div>
          <!-- Grid column -->
        </div>
        <!-- Grid row -->
      </div>
    </section>
    <!-- Section: Links  -->
  
    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
      © 2021 Copyright:
      <a class="text-reset fw-bold" href="#">zuhaowan.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!-- Footer -->
</body>

<script>
//设置cookie
// var setCookie = function (name, value, day) {
//     //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
//     var expires = day * 24 * 60 * 60 * 1000;
//     var exp = new Date();
//     exp.setTime(exp.getTime() + expires);
//     document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
// };
// //删除cookie
// var delCookie = function (name) {
//     setCookie(name, ' ', -1);
// };
// //传递cookie
// function toProductDetail() {
//     var id = document.getElementById("productid");
//     setCookie('productid',id.value,7)
    
// }
// function deletecookie() {
//     delCookie('userName',' ',-1)
// }
</script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.bundle461.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>

<!-- 引入接口文件 -->
<script src="js/API/index.js"></script>
<script>
    $("#person_center").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("personalCenter.html");
        }
    })
</script>
<script>
    $("#my-msg").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("message.html");
        }
    })
</script>
</html>


